<template>
	<el-container style="padding: 20px">
		<el-header>
			<div>
				<el-button @click="add('新增')" size="mini" type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
				<el-button @click="exportFile()" size="mini" type="primary" icon="el-icon-folder-opened">导出</el-button>
			</div>
			<el-form label-width="120px" style="display: flex">
				<el-form-item label="经理类型：">
					<el-checkbox-group v-model="seachData.managerTypeList" @change="searchClick">
						<el-checkbox label="1">基金经理</el-checkbox>
						<el-checkbox label="2">投资经理</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="状态：" label-width="80px">
					<el-radio-group v-model="seachData.state" @change="searchClick">
						<el-radio label="">全部</el-radio>
						<el-radio label="1">在职</el-radio>
						<el-radio label="2">离职</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="基金经理名称：">
					<el-input v-model="seachData.managerName" @input="searchClick" clearable size="medium" style="width: 160px" />
				</el-form-item>
				<el-form-item label="基金经理类型：">
					<el-select v-model="seachData.fundManagerType" clearable filterable @change="searchClick" size="medium" style="width: 160px">
						<el-option key="" label="--全部--" value=""> </el-option>
						<el-option v-for="(item, index) in fundType" :key="index + 'c'" :label="item.typeName" :value="item.typeCode"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="部门：" label-width="80px">
					<el-select v-model="seachData.departmentId" clearable filterable @change="searchClick" size="medium" style="width: 160px">
						<el-option key="" label="--全部--" value=""> </el-option>
						<el-option v-for="(item, index) in departmentList" :key="index + 'c'" :label="item.departmentName" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-header>
		<el-main>
			<div style="display: flex; margin-bottom: 16px">
				<el-dropdown>
					<el-button size="small"> 清除筛选条件<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
					<el-dropdown-menu slot="dropdown" trigger="click">
						<el-dropdown-item v-for="(item, index) in listItem" :key="index + 'a'" @click.native="resetDateFilter(item.value)">{{
							item.key
						}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-button @click="clearFilter" style="margin-left: 16px" size="small">清除所有筛选条件</el-button>
			</div>
			<el-table
				:data="tableData"
				border
				style="width: 100%"
				:key="tabComkey"
				ref="filterTable"
				:header-cell-style="{ background: '#FAFAFA' }"
				v-loading="searchLoading"
				element-loading-text="正在加载数据，请耐心等待......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
			>
				<el-table-column
					prop="managerName"
					label="姓名"
					width="160"
					column-key="managerName"
					:filters="returnFilterArray('managerName')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="managerName" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column
					prop="departmentName"
					label="部门"
					width="180"
					column-key="departmentName"
					:filters="returnFilterArray('departmentName')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="departmentName" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column
					prop="managerType"
					label="类型"
					column-key="managerType"
					:filters="returnFilterArray('managerType')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
					<template slot-scope="scope">
						<span v-if="!!scope.row.managerType">
							{{ scope.row.managerType === '1' ? '基金经理' : '投资经理' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="fundManagerType"
					label="基金经理类型"
					column-key="fundManagerType"
					:filters="returnFilterArray('fundManagerType')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
					<template slot-scope="scope">
						<span v-if="!!scope.row.fundManagerType">
							{{ fundType.filter(item => item.typeCode === scope.row.fundManagerType)[0].typeName }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="yearsOfEmployment"
					label="从业行业年限"
					sortable
					column-key="yearsOfEmployment"
					:filters="returnFilterArray('yearsOfEmployment')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
				</el-table-column>
				<el-table-column
					prop="stockEntryStartDate"
					label="证券从业起始日"
					sortable
					column-key="stockEntryStartDate"
					:filters="returnFilterArray('stockEntryStartDate')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
					<template slot-scope="scope">
						{{ scope.row.stockEntryStartDate | timerConversionStr }}
					</template>
				</el-table-column>
				<el-table-column
					prop="state"
					label="状态"
					column-key="state"
					:filters="returnFilterArray('state')"
					:filter-method="filterHandler"
					filter-placement="bottom"
				>
					<template slot-scope="scope">
						{{ scope.row.state === '1' ? '在职' : '离职' }}
					</template>
				</el-table-column>
				<el-table-column prop="resume" label="个人简历">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="resume" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作" width="280px">
					<template slot-scope="scope">
						<el-button @click="add('查看', scope.row)" size="mini" type="primary" icon="el-icon-view">查看</el-button>
						<el-button @click="add('修改', scope.row)" size="mini" type="primary" icon="el-icon-edit">修改</el-button>
						<el-button type="danger" size="mini" @click="delClick(scope.row)" icon="el-icon-delete">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				:disabled="searchLoading"
				:page-size="paging.size"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="paging.num"
				:page-sizes="paging.sizes"
				layout="sizes,prev,pager,next,jumper,total"
				:total="paging.total"
			/>
		</el-main>
		<managerInfo
			:title="title"
			:fundType="fundType"
			:addComShow="addComShow"
			:departmentList="departmentList"
			:idTypeList="idTypeList"
			@comIsShow="comIsShow"
			@queryFundManagerList="getListData"
			ref="managerInfo"
		/>
	</el-container>
</template>
<script>
	import { getManagerList, delManager, getDepartments, exportManager } from '@/api/productApi/fundManager'
	import { debounce } from '@/utils/debounceFunc'
	import { getEnum, downloadFile } from '@/api/productApi/file'
	import managerInfo from './components/index'
	import { timerConversionStr } from '@/filters/index'
	import { SpecialReplace } from '@/utils/characters'
	export default {
		name: 'ManagerList',
		components: {
			managerInfo
		},
		data() {
			return {
				tableData: [],
				seachData: {
					departmentId: '',
					fundManagerType: '',
					managerId: '',
					managerName: '',
					managerTypeList: ['1', '2'],
					state: ''
				},
				changeTypeList: [],
				paging: {
					// 分页配置
					// 显示的条目数
					size: 10,
					// 当前页数
					num: 1,
					total: 0,
					pages: 0,
					sizes: [10, 50, 100, 200]
				},
				tabComkey: 1,
				fundType: [],
				departmentList: [],
				title: '',
				addComShow: false,
				idTypeList: [],
				listItem: [
					{ key: '姓名', value: 'managerName' },
					{ key: '部门', value: 'departmentName' },
					{ key: '类型', value: 'managerType' },
					{ key: '基金经理类型', value: 'fundManagerType' },
					{ key: '从业行业年限', value: 'yearsOfEmployment' },
					{ key: '证券从业起始日', value: 'stockEntryStartDate' },
					{ key: '状态', value: 'state' }
				],
				searchLoading: false,
				cacheData: [] // 缓存最新输入的值
			}
		},
		async mounted() {
			await this.getNumList()
			this.getListData()
		},
		methods: {
			resetDateFilter(msg) {
				this.$refs.filterTable.clearFilter(msg)
			},

			clearFilter() {
				this.$refs.filterTable.clearFilter()
			},

			returnFilterArray(property) {
				const array = []
				if (property === 'managerType') {
					this.tableData.forEach(item => {
						if (!array.some(items => items.value === item[property]) && !!item[property]) {
							const obj = { text: item[property] ? `${item[property] === '1' ? '基金经理' : '投资经理'}` : '', value: item[property] }
							array.push(obj)
						}
					})
				} else if (property === 'fundManagerType') {
					this.tableData.forEach(item => {
						if (!array.some(items => items.value === item[property]) && !!item[property]) {
							const obj = {
								text: item[property] ? `${this.fundType.filter(items => items.typeCode === item[property])[0].typeName}` : '',
								value: item[property]
							}
							array.push(obj)
						}
					})
				} else if (property === 'stockEntryStartDate') {
					this.tableData.forEach(item => {
						if (!array.some(items => items.value === item[property]) && !!item[property]) {
							const obj = { text: timerConversionStr(item[property]), value: item[property] }
							array.push(obj)
						}
					})
				} else if (property === 'state') {
					this.tableData.forEach(item => {
						if (!array.some(items => items.value === item[property]) && !!item[property]) {
							const obj = { text: item[property] === '1' ? '在职' : '离职', value: item[property] }
							array.push(obj)
						}
					})
				} else {
					this.tableData.forEach(item => {
						if (!array.some(items => items.text === item[property]) && !!item[property]) {
							const obj = { text: item[property], value: item[property] }
							array.push(obj)
						}
					})
				}
				return array
			},

			filterHandler(value, row, column) {
				const property = column['property']
				return row[property] === value
			},

			add(title, obj) {
				this.title = title
				this.comIsShow()
				if (obj) {
					this.$refs.managerInfo.edit(obj)
				}
			},

			comIsShow() {
				this.addComShow = !this.addComShow
			},

			delClick(obj) {
				this.operatorComfirm(() => {
					delManager(obj).then(res => {
						if (res.msgCode === 'Y') {
							if (this.paging.total === 11) {
								this.paging.num = 1
							}
							this.getListData()
							this.$message({ message: res.msgDesc, type: 'success' })
						}
					})
				}, `删除该基金经理信息`)
			},

			searchClick() {
				this.paging.num = 1
				this.cacheData = [this.seachData]
				if (!this.searchLoading) {
					this.getListData()
				}
			},

			getListData: debounce(function() {
				if (SpecialReplace(this.seachData.managerName, false)) {
					return
				}
				this.searchLoading = true
				this.cacheData = []
				getManagerList(this.seachData, this.paging)
					.then(res => {
						if (res.msgCode === 'Y') {
							this.tabComkey += 1
							this.tableData = res.data.body.list
							this.paging.total = res.data.body.total
						}
					})
					.finally(() => {
						if (!this.cacheData.length) {
							this.searchLoading = false
						}
						if (this.cacheData.length && this.searchLoading) {
							this.getListData()
						}
					})
			}, 100),

			async getNumList() {
				await getEnum(['managerType', 'idType']).then(res => {
					if (res.msgCode === 'Y') {
						this.fundType = res.data.body.managerType
						this.idTypeList = res.data.body.idType
					}
				})
				getDepartments().then(res => {
					if (res.msgCode === 'Y') {
						this.departmentList = res.data.body.filter(item => !!item.departmentName && !!item.id)
					}
				})
			},

			exportFile() {
				exportManager(this.seachData).then(res => {
					if (res.msgCode === 'Y') {
						downloadFile({ fid: res.data.body }).then(item => {
							if (item) {
								window.open(`/update/download.do?fid=${res.data.body}`)
								this.$message({ showClose: true, message: '正在下载，请稍等......', type: 'success' })
							}
						})
					}
				})
			},

			// 改变页数
			handleCurrentChange(val) {
				this.paging.num = val
				this.getListData()
			},

			// 改变条数
			handleSizeChange(val) {
				this.paging.num = 1
				this.paging.size = val
				this.getListData()
			}
		}
	}
</script>
<style lang="scss" scoped >
	.el-footer {
		background-color: #b3c0d1;
		color: #333;
		text-align: center;
	}

	.el-header {
		background-color: white;
		color: #333;
		text-align: center;
		margin-bottom: 16px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.el-main {
		background-color: white;
		color: #333;
		text-align: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		::v-deep th {
			padding: 3px 0;
		}
	}
	.el-form-item {
		margin-bottom: 0 !important;
	}
	.el-checkbox,
	.el-radio {
		margin-right: 10px;
	}
	::v-deep .el-pagination {
		padding: 0;
		text-align: left;
		.el-input {
			margin: 0;
		}
		.el-pagination__total {
			float: right;
			margin-right: 0;
		}
		margin: 16px 0 16px 0;
	}
	pre {
		white-space: pre-wrap;
		word-wrap: break-word;
		max-width: 500px;
	}
	::v-deep td {
		padding: 10px 0 !important;
	}
</style>

